<template>
  <div>
    <el-card style="margin-bottom: 60px">
      <div slot="header" class="clearfix">
        <el-button @click="back" icon="el-icon-arrow-left">返回</el-button>
        <span style="margin-left: 10px">{{
          ruleForm.id ? ($route.query.type == 1 ? '编辑培训' : '培训详情') : '新增培训'
        }}</span>
      </div>
      
      <!-- 基本信息部分 -->
      <div class="section">
        <div class="section-title">基本信息</div>
        <el-form
          :model="ruleForm"
          style="width: 100%; margin-bottom: 10px"
          :rules="rules"
          ref="ruleForm"
          label-width="70px"
          class="demo-ruleForm"
          inline
        >
          <el-form-item label="培训名称" prop="plan_name" style="margin-right: 50px">
            <el-input v-model="ruleForm.plan_name" style="width: 500px" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="培训编号" prop="code" style="margin-right: 50px">
            <el-input v-model="ruleForm.code" style="width: 500px" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="培训类型" prop="selected_type_ids" style="margin-right: 50px">
            <el-cascader
              :show-all-levels="false"
              :options="options2"
              style="width: 500px"
              v-model="ruleForm.selected_type_ids"
              :props="{ multiple: true, checkStrictly: true, label: 'title', value: 'id' }"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="培训时间" prop="date" style="margin-right: 20px">
            <el-date-picker
              style="width: 500px"
              v-model="ruleForm.date"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <br />
          <el-form-item label="培训方式" prop="plan_type" style="margin-right: 50px">
            <el-select style="width: 500px" v-model="ruleForm.plan_type" placeholder="请选择">
              <el-option label="内部培训" :value="1">内部培训</el-option>
              <el-option label="外部培训" :value="2">外部培训</el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="ruleForm.plan_type == 2" label="项目" prop="project_id" style="margin-right: 50px">
            <el-select style="width: 500px" v-model="ruleForm.project_id" placeholder="请选择">
              <el-option v-for="(item,index) in projectArr" :key="index" :label="item.project_name" :value="item.id">{{ item.project_name }}</el-option>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item label="备注" prop="remarks">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3 }"
              style="width: 1120px"
              placeholder="请输入备注"
              v-model="ruleForm.remarks"
            >
            </el-input>
          </el-form-item>
          <br />
          <el-form-item label="培训内容" prop="content">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3 }"
              style="width: 1120px"
              placeholder="请输入培训内容"
              v-model="ruleForm.content"
            >
            </el-input>
          </el-form-item>
          <br />
          <el-form-item label="是否考试" prop="exam_status">
            <el-radio v-model="ruleForm.exam_status" :label="1">是</el-radio>
            <el-radio v-model="ruleForm.exam_status" :label="2">否</el-radio>
          </el-form-item>
          <br />
          <el-form-item label="抓拍时间" prop="interval_time" style="margin-right: 50px">
            <el-input-number v-model="ruleForm.interval_time" style="width: 500px" placeholder="请输入抓拍间隔时间"></el-input-number>
            <br>
            <span style="font-size: 12px; color: red;">注：设置抓拍间隔时间，单位为 分</span>
          </el-form-item>

          <el-form-item label="抓拍次数" prop="snap_count" style="margin-right: 50px" >
            <el-input-number v-model="ruleForm.snap_count" style="width: 500px" placeholder="请输入抓拍次数"></el-input-number>
            <br>
            <span style="font-size: 12px; color: red;">注：设置抓拍的总次数</span>
          </el-form-item>
          <br />
          <el-form-item label="课件抓拍" prop="courseware_snap_count" style="margin-right: 50px" >
            <el-input-number v-model="ruleForm.courseware_snap_count" style="width: 500px" placeholder="请输入课件抓拍次数"></el-input-number>
            <br>
            <span style="font-size: 12px; color: red;">注：设置课件抓拍的次数</span>
          </el-form-item>
          <br />
          <el-form-item prop="exam_id" v-if="ruleForm.exam_status == 1">
            <el-button type="primary" size="medium" @click="addExam">添加试卷</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
          style="width: 100%"
          v-if="ruleForm.exam_status == 1"
        >
          <el-table-column fixed type="index" align="center" label="序号" width="50" />
          <el-table-column
            fixed
            prop="exam_name"
            align="center"
            show-overflow-tooltip
            label="试卷名称"
            min-width="200"
          />
          <el-table-column prop="type_name" align="center" label="培训类型" min-width="140"> </el-table-column>
          <el-table-column fixed="right" align="center" prop="action" label="操作" width="160">
            <template #default="scope">
              <div class="action">
                <span @click="delExam(scope.row)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 用户管理部分 -->
      <div class="section">
        <div class="section-title">用户管理</div>
        <div class="flex">
          <el-button type="primary" size="medium" @click="addUser">添加用户</el-button>
        </div>
        <el-table
          :data="pagedData"
          border
          empty-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column fixed type="index" align="center" label="序号" width="50" />
          <el-table-column fixed prop="username" align="center" show-overflow-tooltip label="姓名" min-width="140" />
          <el-table-column fixed prop="sex" align="center" show-overflow-tooltip label="性别" min-width="60" />
          <el-table-column prop="department_path" align="center" label="组织架构" min-width="220"></el-table-column>
          <el-table-column prop="idcard" align="center" label="身份证号" min-width="160"></el-table-column>
          <el-table-column prop="mobile" align="center" label="联系方式" width="140"></el-table-column>
          <el-table-column fixed="right" align="center" prop="action" label="操作" width="160">
            <template #default="scope">
              <div class="action">
                <span @click="delUser(scope.$index)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          style="margin-top: 5px"
          v-model:page-size="pageSize"
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          layout="total, prev, pager, next,sizes,jumper"
          :total="tableData1.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

      <!-- 课程管理部分 -->
      <div class="section">
        <div class="section-title">课程管理</div>
        <div class="flex">
          <el-button type="primary" size="medium" @click="addCourse">添加课程</el-button>
        </div>
        <el-table
          :data="tableData2"
          border
          empty-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column fixed type="index" align="center" label="序号" width="50" />
          <el-table-column
            fixed
            prop="course_name"
            align="center"
            show-overflow-tooltip
            label="课程名称"
            min-width="140"
          />
          <el-table-column prop="ware_duration" align="center" label="课时(分)" min-width="130" />
          <el-table-column prop="ware_count" align="center" label="课件数量" min-width="100"></el-table-column>
          <el-table-column prop="resource_type" align="center" label="课件来源" min-width="100">
            <template #default="scope">
              <span v-if="scope.row.resource_type == 1">公共资源</span>
              <span v-else-if="scope.row.resource_type == 2">平台资源</span>
              <span v-else-if="scope.row.resource_type == 3">我的资源</span>
            </template>
          </el-table-column>
          <el-table-column prop="type_name" align="center" label="培训类型" min-width="140"></el-table-column>
          <el-table-column fixed="right" align="center" prop="action" label="操作" width="160">
            <template #default="scope">
              <div class="action">
                <span v-if="scope.$index > 0" @click="handleUpCourse(scope.row, scope.$index)">上移</span>
                <span v-if="scope.$index < tableData2.length - 1" @click="handleDownCourse(scope.row, scope.$index)"
                  >下移</span
                >
                <span @click="delCourse(scope.$index)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    
    <div class="footer" v-if="ruleForm.online_status != 9">
      <el-button @click="back">关闭</el-button>
      <el-button type="primary" size="medium" @click="submitForm('ruleForm')">确认</el-button>
    </div>

    <!-- 添加课程 -->
    <el-dialog title="添加课程" :visible.sync="isShowAddCourse" width="1000px" :before-close="handleCloseCourse" :close-on-click-modal="false">
      <div class="head">
        <div class="input">
          <span>课程名称：</span>
          <el-input v-model="courseQueryData.course_name" placeholder="请输入课程名称" />
        </div>
        <div class="input">
          <span>课程来源：</span>
          <el-select v-model="courseQueryData.resource_type" placeholder="请选择课程来源">
            <el-option label="公共课程" :value="1">公共课程</el-option>
            <el-option label="平台课程" :value="2">平台课程</el-option>
            <el-option label="我的课程" :value="3">我的课程</el-option>
          </el-select>
        </div>
        <div class="input">
          <span>培训类型：</span>
          <el-cascader
            :show-all-levels="false"
            :options="options2"
            v-model="courseQueryData.selected_type_ids"
            :props="{ multiple: true, checkStrictly: true, label: 'title', value: 'id' }"
            clearable
          ></el-cascader>
        </div>
        <el-button type="primary" class="btn" @click="searchCourse">查询</el-button>
        <el-button type="primary" class="btn" @click="resetCourse">重置</el-button>
      </div>
      <el-table
        :data="courseArr"
        border
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        @selection-change="handleCouresChange"
      >
        <el-table-column fixed type="selection" align="center" label="序号" width="50" />
        <el-table-column
          fixed
          prop="course_name"
          align="center"
          show-overflow-tooltip
          label="课程名称"
          min-width="140"
        />
        <el-table-column prop="ware_duration" align="center" label="课时(分)" min-width="130" />
        <el-table-column prop="ware_count" align="center" label="课件数量" min-width="100"></el-table-column>
        <el-table-column prop="resource_type" align="center" label="课件来源" min-width="100">
          <template #default="scope">
            <span v-if="scope.row.resource_type == 1">公共资源</span>
            <span v-else-if="scope.row.resource_type == 2">平台资源</span>
            <span v-else-if="scope.row.resource_type == 3">我的资源</span>
          </template>
        </el-table-column>
        <el-table-column prop="type_name" align="center" label="培训类型" min-width="140"></el-table-column>
        <el-table-column prop="create_time" align="center" label="创建时间" min-width="140"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 5px"
        @size-change="searchCourse"
        @current-change="getCourseList"
        :current-page.sync="courseQueryData.page"
        :page-size.sync="courseQueryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="courseTotal"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseCourse">取 消</el-button>
        <el-button type="primary" @click="handelConfirmCourse">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加用户 -->
    <el-dialog title="添加用户" :visible.sync="isShowAddUser" width="1200px" :before-close="handleCloseUser" :close-on-click-modal="false">
      <div class="head">
        <div class="input">
          <span>组织架构：</span>
          <el-cascader
            :show-all-levels="false"
            :options="departOptions"
            v-model="userQueryData.selected_type_ids"
            :props="{ multiple: true, checkStrictly: true, label: 'department_name', value: 'id' }"
            clearable
          ></el-cascader>
        </div>
        <div class="input">
          <span>姓名：</span>
          <el-input v-model="userQueryData.username" placeholder="请输入人员名称" />
        </div>
        <div class="input">
          <span>身份证号：</span>
          <el-input v-model="userQueryData.idcard" placeholder="请输入身份证号" />
        </div>
        <div class="input">
          <span>工种/岗位：</span>
          <el-cascader
            v-model="userQueryData.job_id"
            placeholder="请选择工种/岗位"
            :options="jobListType"
            :props="{ multiple: true,checkStrictly: true, value: 'id', label: 'para_name' }"
            clearable
            :show-all-levels="false"
          ></el-cascader>
<!--          <el-select v-model="userQueryData.job_id" placeholder="请选择工种/岗位">-->
<!--            <el-option v-for="(item, index) in jobList" :key="index" :label="item.para_name" :value="item.id">{{-->
<!--              item.para_name-->
<!--            }}</el-option>-->
<!--          </el-select>-->
        </div>
        
        <el-button type="primary" class="btn" @click="searchUser">查询</el-button>
        <el-button type="primary" class="btn" @click="resetUser">重置</el-button>
      </div>
      <el-table
        :data="userArr"
        border
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        @selection-change="handleUserChange"
      >
        <el-table-column fixed type="selection" align="center" label="序号" width="50" />
        <el-table-column fixed prop="username" align="center" show-overflow-tooltip label="姓名" min-width="140" />
        <el-table-column prop="idcard" align="center" label="身份证号" min-width="160"></el-table-column>
        <el-table-column prop="mobile" align="center" label="联系方式/账号" width="140"></el-table-column>
        <el-table-column prop="edu_name" align="center" label="学历" width="120"></el-table-column>
        <el-table-column prop="level_name" align="center" label="人员级别" width="140"></el-table-column>
        <el-table-column prop="staff_type" align="center" label="人员级别" width="140">
          <template #default="scope">{{ scope.row.staff_type == 1 ? '内部人员' : '项目人员' }}</template>
        </el-table-column>
        <el-table-column prop="job_name" align="center" label="工种/岗位" width="140"></el-table-column>
        <el-table-column prop="job_status" align="center" label="状态" width="100">
          <template #default="scope">
            {{ scope.row.job_status == 1 ? '在职' : '离职' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center" label="账号状态" width="100">
          <template #default="scope">
            {{ scope.row.status == 1 ? '正常' : '禁用' }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 5px"
        @size-change="searchUser"
        @current-change="getUserList"
        :current-page.sync="userQueryData.page"
        :page-size.sync="userQueryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="userTotal"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseUser">取 消</el-button>
        <el-button type="primary" @click="handelConfirmUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加试卷 -->
    <el-dialog title="添加试卷" :visible.sync="isShowAddExam" width="1000px" :before-close="handleCloseExam" :close-on-click-modal="false">
      <div class="head">
        <div class="input">
          <span>试卷名称：</span>
          <el-input v-model="examQueryData.exam_name" placeholder="请输入试卷名称" />
        </div>
        <div class="input">
          <span>试卷来源：</span>
          <el-select v-model="examQueryData.create_type" placeholder="请选择试卷来源">
            <el-option label="平台试卷" :value="1">平台试卷</el-option>
            <el-option label="我的试卷" :value="2">我的试卷</el-option>
          </el-select>
        </div>
        <div class="input">
          <span>培训类型：</span>
          <el-cascader
            :show-all-levels="false"
            :options="options2"
            v-model="examQueryData.selected_type_ids"
            :props="{ multiple: true, checkStrictly: true, label: 'title', value: 'id' }"
            clearable
          ></el-cascader>
        </div>
        <el-button type="primary" class="btn" @click="searchExam">查询</el-button>
        <el-button type="primary" class="btn" @click="resetExam">重置</el-button>
      </div>
      <el-table
        ref="examTable"
        :data="examArr"
        border
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        @selection-change="handleExamChange"
      >
        <el-table-column type="selection" align="center" label="序号" width="50" />
        <el-table-column prop="exam_name" align="center" show-overflow-tooltip label="试卷名称" min-width="200" />
        <el-table-column prop="type_name" align="center" label="培训类型" min-width="140"> </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 5px"
        @size-change="searchExam"
        @current-change="getExamList"
        :current-page.sync="examQueryData.page"
        :page-size.sync="examQueryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="examTotal"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseExam">取 消</el-button>
        <el-button type="primary" @click="handelConfirmExam">确 定</el-button>
      </span>
    </el-dialog>

    <el-image-viewer
      style="z-index: 9999"
      v-if="showImg"
      :on-close="
        () => {
          showImg = false;
        }
      "
      :url-list="imgList"
    />
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import {
  TrainTypeTree,
  CourseList,
  Parameterlist,
  DepartmentList,
  StaffList,
  ExamList,
  PlanSave,
  PlanInfo,
  ExamInfo,
  PlanCourses,
  PlanStaffs,
  ProjectPage, ParameterListType
} from "@/api/manage";
export default {
  name: 'addCourseware',
  components: { ElImageViewer },
  data() {
    return {
      ruleForm: {
        code: undefined,
        plan_name: undefined,
        type_ids: [],
        selected_type_ids: [],
        start_time: undefined,
        end_time: undefined,
        date: [],
        exam_status: 2,
        exam_id: undefined,
        remarks: undefined,
        content: undefined,
        course_ids: [],
        staff_ids: [],
        plan_type:2,
        project_id:undefined,
        interval_time: undefined,
        snap_count: undefined,
        courseware_snap_count: undefined,
      },
      options2: [],
      rules: {
        code: [{ required: true, message: '请输入培训编号', trigger: 'blur' }],
        plan_name: [{ required: true, message: '请输入培训名称', trigger: 'blur' }],
        selected_type_ids: [{ required: true, message: '请选择培训类型', trigger: 'change' }],
        date: [{ required: true, message: '请选择培训时间', trigger: 'change' }],
        exam_status: [{ required: true, message: '请选择是否考试', trigger: 'change' }],
        exam_id: [{ required: true, message: '请选择试卷', trigger: 'change' }],
        plan_type: [{ required: true, message: '请选择培训方式', trigger: 'change' }],
        // project_id: [{ required: true, message: '请选择项目', trigger: 'change' }],
        interval_time: [{ required: true, message: '请输入抓拍间隔时间', trigger: 'blur' }],
        snap_count: [{ required: true, message: '请输入抓拍次数', trigger: 'blur' }],
        courseware_snap_count: [{ required: true, message: '请输入课件抓拍次数', trigger: 'blur' }],
      },
      isTableLoading: false,
      queryData: {
        page: 1,
        size: 5,
        name: '',
        type: [],
      },
      total: 0,
      imgList: [],
      showImg: false,
      isShowAddCourse: false,
      courseArr: [],
      courseTotal: 0,
      courseQueryData: {
        course_name: undefined,
        create_type: 1,
        selected_type_ids: [],
        type_ids: [],
        exclude_ids:[],
        page: 1,
        size: 10,
        resource_type: 1,
        // is_my_resource: true,
      },
      checkedCourse: [],
      tableData2: [],
      jobList: [],
      jobListType: [],
      departOptions: [],
      isShowAddUser: false,
      userArr: [],
      userTotal: 0,
      userQueryData: {
        username: undefined,
        idcard: undefined,
        department_id: undefined,
        job_id: undefined,
        job_ids: undefined,
        selected_type_ids: [],
        type_ids: [],
        exclude_ids:[],
        page: 1,
        size: 10,
      },
      checkedUser: [],
      tableData1: [],
      isShowAddExam: false,
      examArr: [],
      examTotal: 0,
      examQueryData: {
        exam_name: undefined,
        selected_type_ids: [],
        type_ids: [],
        create_type: undefined,
        page: 1,
        size: 10,
      },
      checkedExam: [],
      tableData: [],
      projectArr:[],
      addUserData : {
        page: 1,
        size: 5,
        total: 0,
      },
      currentPage: 1,
      pageSize: 10,
    };
  },
  watch: {
    'examQueryData.selected_type_ids': {
      handler(val) {
        this.examQueryData.type_ids = val.map((item) => item[item.length - 1]);
      },
      deep: true,
    },
    'userQueryData.selected_type_ids': {
      handler(val) {
        this.userQueryData.type_ids = val.map((item) => item[item.length - 1]);
      },
      deep: true,
    },
    'courseQueryData.selected_type_ids': {
      handler(val) {
        this.courseQueryData.type_ids = val.map((item) => item[item.length - 1]);
      },
      deep: true,
    },
    'ruleForm.selected_type_ids': {
      handler(val) {
        this.ruleForm.type_ids = val.map((item) => item[item.length - 1]);
      },
      deep: true,
    },
    'userQueryData.job_id': {
      handler(val) {
        this.userQueryData.job_ids = val.map((item) => item[item.length - 1]);
        this.userQueryData.job_select = true;
      },
      deep: true,
    },
    'ruleForm.date': {
      handler(val) {
        if (val.length) {
          this.ruleForm.start_time = val[0];
          this.ruleForm.end_time = val[1];
        } else {
          this.ruleForm.start_time = undefined;
          this.ruleForm.end_time = undefined;
        }
      },
      deep: true,
    },
    tableData: {
      handler(val) {
        if (val.length) {
          this.ruleForm.exam_id = val[0].id;
        } else {
          this.ruleForm.exam_id = undefined;
        }
      },
      deep: true,
    },
    tableData1: {
      handler(val) {
        this.ruleForm.staff_ids = val.map((item) => item.id);
      },
      deep: true,
    },
    tableData2: {
      handler(val) {
        this.ruleForm.course_ids = val.map((item) => item.id);
      },
      deep: true,
    },
  },
  computed: {
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.tableData1.slice(start, end)
    }
  },
  created() {
    this.getTrainTypeTree();
    this.getParameter();
    this.getDepartmentList();
    this.getProjectPage();
    if (this.$route.query.id) {
      this.getInfo();
    }
  },
  mounted() {},
  methods: {
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.currentPage = 1
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
    },

    getPlanStaffs() {
      PlanStaffs({
        id: this.$route.query.id,
      }).then((res) => {
        this.tableData1 = res.data.list;
      });
    },
    getPlanCourses() {
      PlanCourses({
        id: this.$route.query.id,
      }).then((res) => {
        this.tableData2 = res.data.list;
      });
    },
    getExamInfo() {
      ExamInfo({
        id: this.ruleForm.exam_id,
      }).then((res) => {
        res.data.data.type_name = res.data.data.type_names;
        this.tableData = [res.data.data];
      });
    },
    getInfo() {
      PlanInfo({
        id: this.$route.query.id,
      }).then((res) => {
        this.ruleForm = JSON.parse(JSON.stringify(res.data.data));
        if(this.ruleForm.project_id == 0){
          this.ruleForm.project_id = undefined;
        }
        this.$set(this.ruleForm, 'date', [this.ruleForm.start_time, this.ruleForm.end_time]);
        this.getExamInfo();
        this.getPlanCourses();
        this.getPlanStaffs();
      });
    },
    handleImg(item) {
      this.imgList = [item.img_url];
      this.showImg = true;
    },
    // 试卷
    topicDetail(item) {
      this.$router.push({
        path: '/company/testDetails/index',
        query: {
          id: item.id,
          create_type: 1,
        },
      });
    },
    delExam(index) {
      this.tableData.splice(index, 1);
    },
    handleCloseExam() {
      this.isShowAddExam = false;
      this.examQueryData = {
        exam_name: undefined,
        create_type:undefined,
        selected_type_ids: [],
        type_ids: [],
        page: 1,
        size: 10,
      };
    },
    addExam() {
      this.isShowAddExam = true;
      this.getExamList();
    },
    handelConfirmExam() {
      if (!this.checkedExam.length) {
        this.$message.error('请选择试卷！');
        return;
      }
      this.tableData = this.checkedExam;
      this.handleCloseExam();
    },
    handleExamChange(val) {
      if (val.length > 1) {
        // 如果选择了超过两个，则取消选中最先选择的那一项
        let excessSelection = val.shift(); // 移除最早的额外选择
        this.$refs.examTable.toggleRowSelection(excessSelection, false); // 取消选中
      } else {
        this.checkedExam = val;
      }
    },
    resetExam() {
      this.examQueryData.exam_name = '';
      this.examQueryData.create_type = undefined;
      this.examQueryData.selected_type_ids = [];
      this.searchExam();
    },
    searchExam() {
      this.examQueryData.page = 1;
      this.getExamList();
    },
    // 人员
    delUser(index) {
      this.tableData1.splice(index, 1);
      this.addUserData.total = this.addUserData.total - 1;
    },
    handleCloseUser() {
      this.isShowAddUser = false;
      this.userQueryData = {
        username: undefined,
        idcard: undefined,
        department_id: undefined,
        job_id: undefined,
        selected_type_ids: [],
        type_ids: [],
        page: 1,
        size: 10,
      };
    },
    addUser() {
      this.isShowAddUser = true;
      this.userQueryData.exclude_ids = this.tableData1.map((item) => item.id);
      this.getUserList();
    },
    handelConfirmUser() {
      if (!this.checkedUser.length) {
        this.$message.error('请选择人员！');
        return;
      }
      this.tableData1 = this.checkedUser.concat(this.tableData1);
      this.addUserData.total = this.tableData1.length;
      this.handleCloseUser();
    },
    handleUserChange(val) {
      this.checkedUser = val;
    },
    resetUser() {
      this.userQueryData.username = '';
      this.userQueryData.idcard = '';
      this.userQueryData.department_id = '';
      this.userQueryData.job_id = '';
      this.userQueryData.selected_type_ids = [];
      this.searchUser();
    },
    searchUser() {
      this.userQueryData.page = 1;
      this.getUserList();
    },
    // 课程
    handleUpCourse(item, index) {
      if (index <= 0) return;
      this.tableData2 = [
        ...this.tableData2.slice(0, index - 1),
        this.tableData2[index],
        this.tableData2[index - 1],
        ...this.tableData2.slice(index + 1),
      ];
    },
    handleDownCourse(item, index) {
      if (index >= this.tableData2.length - 1) return;
      this.tableData2 = [
        ...this.tableData2.slice(0, index),
        this.tableData2[index + 1],
        this.tableData2[index],
        ...this.tableData2.slice(index + 2),
      ];
    },
    delCourse(index) {
      this.tableData2.splice(index, 1);
    },
    handleCloseCourse() {
      this.isShowAddCourse = false;
      this.courseQueryData = {
        course_name: undefined,
        create_type: 1,
        selected_type_ids: [],
        type_ids: [],
        page: 1,
        size: 10,
      };
    },
    addCourse() {
      this.isShowAddCourse = true;
      this.courseQueryData.exclude_ids = this.tableData2.map((item) => item.id);
      this.getCourseList();
    },
    handelConfirmCourse() {
      if (!this.checkedCourse.length) {
        this.$message.error('请选择课程！');
        return;
      }
      this.tableData2 = this.checkedCourse.concat(this.tableData2);
      this.handleCloseCourse();
    },
    handleCouresChange(val) {
      this.checkedCourse = val;
    },
    resetCourse() {
      this.courseQueryData.course_name = '';
      this.courseQueryData.selected_type_ids = [];
      this.searchCourse();
    },
    searchCourse() {
      this.courseQueryData.page = 1;
      this.getCourseList();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          PlanSave(this.ruleForm).then((res) => {
            this.$message.success(this.ruleForm.id ? '编辑成功' : '新增成功');
            this.back();
          });
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    getCourseList() {
      this.isTableLoading = true;
      CourseList(this.courseQueryData).then((res) => {
        this.courseArr = res.data.list;
        this.courseTotal = res.data.total;
        this.isTableLoading = false;
      });
    },
    getUserList() {
      this.isTableLoading = true;
      this.userQueryData.is_job_status = true;
      StaffList(this.userQueryData).then((res) => {
        this.userArr = res.data.list;
        this.userTotal = res.data.total;
        this.isTableLoading = false;
      });
    },
    getExamList() {
      this.isTableLoading = true;
      ExamList(this.examQueryData).then((res) => {
        this.examArr = res.data.list;
        this.examTotal = res.data.total;
        this.isTableLoading = false;
      });
    },
    getTrainTypeTree() {
      TrainTypeTree().then((res) => {
        this.options2 = res.data.list;
      });
    },
    getParameter() {
      // Parameterlist({
      //   type: 4,
      // }).then((res) => {
      //   this.jobList = res.data;
      // });
      ParameterListType().then((res) => {
        this.jobListType = res.data.list;
      });
    },
    getDepartmentList() {
      DepartmentList({
        department_name: this.userQueryData.department_name,
      }).then((res) => {
        this.departOptions = res.data.list;
      });
    },
    getProjectPage(){
      ProjectPage().then((res) => {
        this.projectArr = res.data.list;
      });
    },
    back() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.title > span {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.flex {
  display: flex;
  align-items: center;
}
.footer {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 210px;
  border-top: 1px solid #e6e6e6;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span,
.look {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.section {
  margin-bottom: 40px;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}
.section:last-child {
  border-bottom: none;
}
.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
  display: inline-block;
}
:deep(.el-table .el-table__header-wrapper .cell .el-checkbox__input) {
  display: none !important;
}
</style>
